Произвольный HTML

Особенности работы
Подключение произвольного HTML-документа к экрану
Доступ к окружению SCADA-системы из JS-кода HTML-документа
Примеры на демо-сервере

API объекта pult
Интеграция сторонних приложений в интерфейс

Пульт.Онлайн поддерживает использование пользовательских мнемосхем, реализованных в виде веб-страниц (HTML, JavaScript, CSS). В качестве мнемосхемы может быть загружен произвольный HTML-документ, который будет отображаться в интерфейсе системы.

Произвольные HTML-документы подключаются к экранам проекта и отображаются, как обычные мнемосхемы, в интерфейсе оператора.

Особенности работы

• Доступ к SCADA-окружению
  HTML-документ загружается в отдельном IFRAME, JavaScript-код документа имеет прямой доступ к переменным, объектам и функциям SCADA-системы через объекты pult, widget и window.top.

• Динамическое обновление
  За счёт интеграции с SCADA-окружением мнемосхема может динамически обновляться, отражая изменения переменных (тегов), тревог и исторических данных.

• Широкие возможности
  Разработчик может использовать любые современные веб-технологии (HTML5, CSS3, JavaScript-фреймворки) для создания интерактивных и визуально сложных мнемосхем.

Подключение произвольного HTML-документа к экрану

1. В редакторе, в разделе проекта Экраны создайте новый экран.
2. Откройте экран.
3. На вкладке Объекты добавьте папку Ресурсы.
4. Откройте в папку Ресурсы.
5. Создайте или загрузите в данную папку требуемые HTML-, JS-, CSS-файлы и изображения.
6. Вернитесь в окно экрана.
7. В свойствах экрана укажите Содержание = Произвольный HTML.
8. В свойстве HTML-файл выберите HTML-файл из ресурсов экрана.
9. Если в JS-рантайме выбранного HTML-документа требуется доступ объектам и функциям сервера, включите галочку Загрузить JS-окружение.
10. Если к выбранной HTML-странице необходимо применить CSS-стили сервера, включите галочку Загрузить CSS-окружение.

После сохранения экран станет доступен в интерфейсе и будет отображать содержание указанного HTML-файла.

Доступ к окружению SCADA-системы из JS-кода HTML-документа

При включенной опции Загрузить JS-окружение, в JS-коде подключенного к экрану HTML-документа будут автоматически созданы следующие переменные:

• pult - объект содержит набор полезных функций для работы с API сервера Пульт.Онлайн.
• widget - ссылка на web-компонент, в котором отображается текущий экран с подключенным HTML-документом. Данный объект требуется указывать в качестве контекста во многих функциях объекта pult. Также может пригодиться свойство widget.path, содержащее путь объекта, ассоциированного с виджетом.

Выполнение кода рекомендуется начинать в вызове функции onpultload, которую необходимо объявить в вашем скрипте. onpultload будет вызвана, когда все скрипты окружения будут загружены и готовы к работе.

Примеры на демо-сервере

На демо-сервере представлено несколько примеров экранов на базе произвольного HTML. В редакторе проектов, в "Ресурсах" выбранного экрана, вы сможете найти исходные HTML, JS и CSS файлы, формирующие внешний вид и логику экрана.

Мониторинг переменных: Интерфейс | Редактор
Редактирование параметров узлов через интерфейс: Интерфейс | Редактор
Отображение карты с местоположением объектов: Интерфейс | Редактор